
ul li {
	list-style: none;
}
a,a:hover {
	text-decoration: none;
	color: black;
}
input.task-input {
	outline: none;
    font-size: 20px;
    width: 98%;
    padding-left: 10px;
    height: 2em;
    margin-top: 20px;
    border-radius: 5px;
    border: 1px solid lightgrey;
}
.btn-input {
	cursor: pointer;
	outline: none;
	color: red;
    font-size: 35px;
    background: transparent;
    border-color: transparent;
    right: 17px;
	margin-top: 22px;
    position: absolute;
    height: 44px;
    width: 44px;
}
.completed label {
	text-decoration: line-through;
	color: #777777;
}
.task-count {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}
.tasks {
	margin-top: 20px;
    float: left;
    border: 1px solid lightgray;
    border-right: 6px solid white;
}
.big-title {
	margin-top: 20px;
}
.todo {
	font-size: 12px;
    line-height: 2em;
    margin: 3px 10px;
    border-bottom: 1px solid #f1f1f1;
}
.view {
	height: 46px;	
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.destroy {
	color: #c3c3c38a;
	font-size: 26px;
	border: 1px solid transparent;
	background-color: transparent;
	outline: none;
	cursor: pointer;
	margin-right: 20px;
}
.destroy:hover {
	color:red;
}
.word {
	display: flex;
	align-items: center;
}
li.editing .view {
	display: none;
}
li.editing input {
	margin-left:30px;
	outline:none;
	display: block;
	height: 30px;
	width:80%;
	font-size:12px;
}
input.edit {
	display: none;
}
input.show {
	display: block;
}
.todo-list{
	overflow-y: auto;
    height: 300px;
}
.todo-list li .toggle {
    outline: none;
    height: auto;    
    margin: auto 0;
    border: none; /* Mobile Safari */
    -webkit-appearance: none;
    appearance: none;
}
.toggle:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 -28 100 135"><circle cx="50" cy="50" r="40" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
}

.toggle:checked:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 -28 100 135"><circle cx="50" cy="50" r="40" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');   
}
@media screen and (max-width: 1024px) {
	.main {
		width:100%
	}
	label {
		padding-left:0px;
	}
	.toggle:after {
	    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 -28 100 135"><circle cx="50" cy="50" r="40" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
		outline: none;
	    background-color: transparent;
	}

	.toggle:checked:after {
	    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 -28 100 135"><circle cx="50" cy="50" r="40" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');   
		outline: none;
	    background-color: transparent;
	}
	.todo-list li .toggle {
	    outline: none;
	    background-color: transparent;
	    /* Mobile Safari */
	    -webkit-appearance: none;
	    appearance: none;
	}
}
.taskSort{
	right: 60px;
    font-size: 20px;
    width: 120px;
    color: white;
    background: red;
    height: 26px;
    padding: 9px 10px;
}
.startTask{
	background:url(start.png) no-repeat;
	width: 32px;
}
.pauseTask{
	background:url(pause.png) no-repeat;
	width: 32px;
}
.runTime{
	color: lightgray;
    font-size: 15px;
}
input[type='time']{
	border: 0;
	width: 80px;
}
.checkedTask{
	 border: 1px solid #d6dae3;
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.05);
    box-shadow: 5px 10px 10px rgba(0,0,0,0.06);
}

.task-title{
    font-weight: bold;
    background: lightgray;
    padding: 10px;
	color: white;
	cursor: pointer;
}
.checkedTask .task-title{
	background: red;
}
.task-title:hover{
	background: red;
}

.loginDiv{
    text-align: CENTER;
    margin: 100px 0px;
}
.loginDiv input{
	height: 35px;
    width: 300px;
    margin: 20px 0;
    font-size: 20px;
    border: 1px solid lightgray;
    border-radius: 5px;
    padding: 2px 10px;
}
.loginDiv select{
	height: 38px;
    width: 320px;
    margin: 20px 0;
    font-size: 20px;
    border: 1px solid lightgray;
    border-radius: 5px;
    padding: 2px 14px;
}
.loginDiv [type='button']{
	    background: red;
    color: white;
    border: 0px;
    border-radius: 5px;
}
.loginTip{
	color:red
}
 input::-webkit-input-placeholder{
     color:rgb(161, 161, 161);
 }
 input::-moz-placeholder{   /* Mozilla Firefox 19+ */
     color:rgb(161, 161, 161);
 }
 input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
     color:rgb(161, 161, 161);
 }
 input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
     color:rgb(161, 161, 161);
 }